<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>upload</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
    <script src="./js/jquery-1.12.4.min.js"></script>

</head>
<body>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>上传音乐</legend>
</fieldset>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">歌曲名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">歌手</label>
            <div class="layui-input-inline">
                <input type="text" name="singer" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-input-block">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
            <button type="button" class="layui-btn" id="test6"><i class="layui-icon"></i>上传音频</button>
            <button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>上传歌词</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1">
                <p id="demoText"></p>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片路径</label>
        <div class="layui-input-inline">
            <input type="text" id="imgPath" name="imgPath" lay-verify="required|pic" autocomplete="off" class="layui-input" disabled="">
        </div>
        <div class="layui-form-mid layui-word-aux">图片格式(.jpg),存放于/img路径</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">音乐路径</label>
        <div class="layui-input-inline">
            <input type="text" id="musicPath" name="musicPath" lay-verify="required|music" autocomplete="off" class="layui-input" disabled="">
        </div>
        <div class="layui-form-mid layui-word-aux">音乐格式(.mp3),存放于/music路径</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">音乐路径</label>
        <div class="layui-input-inline">
            <input type="text" id="lyricPath" name="lyricPath" lay-verify="required|lyric" autocomplete="off" class="layui-input" disabled="">
        </div>
        <div class="layui-form-mid layui-word-aux">歌词格式(.txt),存放于/lyric路径</div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<div style="width: 500px;height: auto;padding: 10px;margin: 10px">
    <div style="width: 50px;height: 50px;float: left;display: inline">
    </div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'layedit', 'laydate', 'upload'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        var $ = layui.jquery
            ,upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/img/upload' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#imgPath').attr("value",res.name);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        upload.render({
            elem: '#test6'
            ,url: '/music/upload' //改成您自己的上传接口
            ,accept: 'audio' //音频
            ,done: function(res){
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#musicPath').attr("value",res.name);
            }
        });
        upload.render({ //允许上传的文件后缀
            elem: '#test4'
            ,url: '/lyric/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,exts: 'txt' //只允许上传文本文件
            ,done: function(res){
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#lyricPath').attr("value",res.name);
            }
        });
        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            pic: [
                /^.*\.jpg$/
                ,'文件格式错误'
            ],
            music: [
              /^.*\.mp3$/
              ,'文件格式错误'
            ],
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            console.log(JSON.stringify(data.field));
            //alert(345);
            //return false;
            $.ajax({
                url:'/music',
                method:'post',
                data:JSON.stringify(data.field),
                dataType:'JSON',
                contentType: "application/json;charset=utf-8",
                success:function(res){
                    if(res.code==0){
                        layer.msg(res.msg, {
                            time: 0 //不自动关闭
                            ,btn: ['确定']
                            ,yes: function(index){
                                layer.close(index);
                                //$(".layui-form")[0].reset();
                                //form.render();
                            }
                        });
                    }
                    else
                        layer.alert(res.msg);
                }
            })
            return false;
        });
        // //表单赋值
        // layui.$('#LAY-component-form-setval').on('click', function(){
        //     form.val('example', {
        //         "username": "贤心" // "name": "value"
        //         ,"password": "123456"
        //         ,"interest": 1
        //         ,"like[write]": true //复选框选中状态
        //         ,"close": true //开关状态
        //         ,"sex": "女"
        //         ,"desc": "我爱 layui"
        //     });
        // });
        //
        // //表单取值
        // layui.$('#LAY-component-form-getval').on('click', function(){
        //     var data = form.val('example');
        //     alert(JSON.stringify(data));
        // });

    });
</script>

</body>
</html>